<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>-001</title>
    <link rel="icon" href="/img/TIM截图20190121225434.png" >
    <script type="text/javascript" src="js/framework/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/read/main.css">
    <script type="text/javascript" src="/js/framework/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/read/commons.js"></script>

</head>
<body>
    
    <div class="header">
          <h1 class="logo">
            <a href="index.html">
              <span >-001</span>
            </a>
          </h1>
          <div class="nav">
            <a href="/index.html" class="active">首页</a>
            <a href="/html/article.html">文章</a>
            <a href="/html/archive.html">归档</a>
            <a href="/html/about.html">关于</a>
          </div>
          <ul class="layui-nav header-down-nav">
            <li class="layui-nav-item"><a href="/index.html" class="active">首页</a></li>
            <li class="layui-nav-item"><a href="/html/article.html" >文章</a></li>
            <li class="layui-nav-item"><a href="/html/archive.html">归档</a></li>
            <li class="layui-nav-item"><a href="/html/about.html">关于</a></li>
          </ul>

    </div>

    <div class="banner">
      <div class="cont w1000">
        <div class="amount">
        </div>
      </div>
    </div>

    <!-- <div class="content" > -->

    <div class="details">

      <div class="content-left">

          <div id="article" class="content">
              <div class="cont w1000">
                <div class="details-title">
                  <a class="title">新文章 </a>
                </div>
                <div v-for="article in articles">
                  <div class="list-item">
                    <div class="item">
                      <div class="layui-fluid">
                        <div class="layui-row">
                          <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                            <div class="img"><img :src="article.img" alt=""></div>
                          </div>
                          <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                            <div class="item-cont">
                              <h3>
                                {{ article.title }}
                                <button class="layui-btn layui-btn-danger new-icon">new</button></h3>
                              <h5>
                                {{ article.label }}
                              </h5>
                              <p>{{ article.content }}</p>
                              <a href="#" class="go-icon" @click="jumpreadmd(article.id)"></a>
                            </div>
                        </div>
                        </div>
                       </div>
                    </div>
                  </div>
                </div>
                
              </div>
              <div class="more">
                  <a class="more-a" href="/html/article.html" target="view_window">更多→</a>
              </div>
            </div>

      </div>


      <div id="info" class="content-right">
        <div class="right-div r-div">
            <div class="right-title">
                <a class="title">最新更新</a>
            </div>
            <hr class="right-hr" >
            <ul class="right-ul article-ul" v-for="article in articles">
              <li class="article-li">
                  <a class="article-a" @click="jumpreadmd(article.id)"> {{ article.title }} </a>
              </li>
            </ul>
        </div>
        <div class="right-div r-div">
          <div class="right-title">
              <a class="title">分类 </a>
          </div>
          <hr class="right-hr">
          <ul class="right-ul article-ul" v-for="category in categorys">
            <li class="article-li">
                <a class="article-a" @click="jumparticle(category.id)">{{ category.category }}  {{ category.count }} </a>
            </li>
          </ul>
        </div>
        <div class="right-div r-div">
          <div class="right-title">
              <a class="title">标签 </a>
          </div>
          <hr class="right-hr">
          <ul class="right-ul article-ul" v-for="label in labels">
            <li class="article-li">
                <a class="article-a">{{ label.name }} </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer-a">
        <div class="text">
            <h4 class="title">-001&nbsp一片秋叶个人笔记</h4>
            <p>v2.0&nbsp&nbsp<span class="WeChat"> redwys.xyz 桂ICP备18004478号-1&nbsp&nbsp©</span></p>
        </div>
    </div>

    <!-- js -->
    <script>

        // 数据加载
        $(function () {
           $.ajax({
              url:config.url.get_article_new,
              type:'GET',
              contentType:'application/json; charset=UTF-8',
              success:function (article) {
                  articleVue.articles = article.data;
              },
              error: function() {
                  console.log("服务器获取失败");
              }
          });

          $.ajax({
                url:config.url.get_article_update,
                type:'GET',
                contentType:'application/json; charset=UTF-8',
                success:function (article) {
                    infoVue.articles = article.data;
                },
                error: function() {
                    console.log("服务器获取失败");
                }
          });

          $.ajax({
                url:config.url.get_article_category,
                type:'GET',
                contentType:'application/json; charset=UTF-8',
                success:function (article) {
                    infoVue.categorys = article.data;
                },
                error: function() {
                    console.log("服务器获取失败");
                }
          });

      });

      var articleVue = new Vue({
          el: '#article',
          data: {
              articles: [],
          },
          methods: {
              jumpreadmd: function (blogtitle) {
                  
                  // 拿到的字符串前面有空格，不懂
                  // blogtitle = blogtitle.replace(/(^\s*)/g, "");   // 去除前面的空格

                  localStorage.setItem("blogtitle", blogtitle);
                  window.location.href = "/html/read.html";

              }
          }
      });

      var infoVue = new Vue({
          el: '#info',
          data: {
              articles: [
                  // { title: "tomcat的使用"},
                  // { title: "邦查女孩"},
                  // { title: "画笔下的人间日常"},
                  // { title: "哪一个瞬间觉得生活是温柔的？"},
                  // { title: "我有独特的起床技巧"}
                ],
              categorys: [
                  // { name: "你梦见过哪些电影场景？"},
                  // { name: "生活中的失焦时刻"},
                  // { name: "这样认识一座城——城市进化的10种姿态"},
                  // { name: "从零开始写隶书——30天隶书技法成长营（第二期）"},
                  // { name: "电影的左脑——电影制作技术的硬核浪漫"}
              ], 
              labels: [
                  { name: "动漫"},
                  { name: "代码"},
                  { name: "看书 练字"},
                  { name: "刷知乎 刷v2ex"},
                  { name: "csdn 开源中国 github 码云 youtube"},
                  { name: "看电影 青春 文艺"}
              ], 
          },
          methods: {
              // 跳到阅读页面
              jumpreadmd: function (blogtitle) {
                  
                  // 拿到的字符串前面有空格，不懂
                  // blogtitle = blogtitle.replace(/(^\s*)/g, "");   // 去除前面的空格

                  localStorage.setItem("blogtitle", blogtitle);
                  window.location.href = "/html/read.html";

              },

              // 跳到分类页面
              jumparticle: function (category) {
                  localStorage.setItem("category", category);
                  window.location.href = "/html/article.html";

              }
          }
      });

    </script>

</body>
</html>